<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .counter {
  font-size: 36px;
  font-weight: bold;
  text-align: center;
  width: 100px;
  height: 100px;
  line-height: 100px;
  border-radius: 50%;
  background-color: blue;
  color: white;
  margin: 50px auto;
}

.button {
  display: block;
  margin: 0 auto;
  padding: 10px 20px;
  font-size: 18px;
  background-color: white;
  border: 2px solid blue;
  border-radius: 5px;
  cursor: pointer;
}
    </style>
</head>
<body>
    <div id="counter" class="counter">0</div>
<button id="increment" class="button">增加</button>
<button id="decrement" class="button">减少</button>
<script>
    const counter = document.getElementById('counter');
const incrementButton = document.getElementById('increment');
const decrementButton = document.getElementById('decrement');

function changeColor() {
  const colors = ['blue', 'green', 'red', 'purple'];
  const randomColor = colors[Math.floor(Math.random() * colors.length)];
  counter.style.backgroundColor = randomColor;
}

function handleClick(event) {
  const isIncrementButton = event.target === incrementButton;
  const isDecrementButton = event.target === decrementButton;

  if (isIncrementButton) {
    counter.innerText = parseInt(counter.innerText) + 1;
  } else if (isDecrementButton) {
    counter.innerText = parseInt(counter.innerText) - 1;
  }

  changeColor();
}

document.addEventListener('click', handleClick);
</script>
</body>
</html>